<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{border: 1px solid red}
        ul{
            list-style: none;
        }
        a{
            display: block;
            background-color: #16ceff;
            width: 120px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            border: 1px solid #2667ff;
        }
        /*#ul2{*/
            /*display: none;*/
        /*}*/
        /*#a1:hover #ul2{*/
            /*display: block;*/
        /*}*/
    </style>
</head>
<body>
<!--block -->
<ul>
    <li id="a1" onmouseenter="show()" onmouseleave="hid()">
        <a>章节</a>
        <ul id="ul2">
            <li><a>python</a></li>
            <li><a>go</a></li>
        </ul>

    </li>
    <li><a>问答</a></li>
    <li><a>笔记</a></li>
    <li><a>提问</a></li>
</ul>
<script>
    let a1 = document.getElementById('a1');
    let ul2 = document.getElementById('ul2');
    ul2.style.display = 'none';
    function show() {
        ul2.style.display = 'block'
    }
    function hid() {
        ul2.style.display = 'none'
    }
</script>
</body>
</html>